<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<!--    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">-->
    <title>淘京</title>
    <link href="back/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="css/head.css" rel="stylesheet" type="text/css"/>
    <link href="css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <title></title>
</head>
<body>
<div class="head1">
    <div class="layui-row">
        <div class="layui-col-xs1">
            <div class="grid-demo"></div>
        </div>
        <div class="layui-col-xs4">
            <div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
        </div>

        <div class="layui-col-xs1">
            <div class="login">
                <div class="grid-demo grid-demo-bg1" id="classifiction_2">
                    <a href="javascript:void(0)" id="login-reg" style="margin-top: 5px;">登录/注册</a>
                </div>
                <div class="login_check">
                    <div class="userpic"><a href="#"><img src="imgs/购物.png"/></a></div>
                    <div class="userinfo">
                        <div class="username" id="classifiction_2">
                            <a href="javascript:void(0)" id="uname">用户名</a>
                            <h1><a href="javascript:void(0)">退出</a></h1>
                        </div>
                        <div class="userid">ID:用户编号:<a href="javascript:void(0)" id="uno">id</a></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的订单</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的淘京</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">商家服务</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo" id="classifiction_2"><a href="#">关于淘京</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo" id="classifiction_2"><a href="#">企业采购</a></div>
        </div>

    </div>

</div>
<div class="head">

    <div class="logo_pic"><a href="#"><img src="imgs/logo1.png"/></a></div>

    <div class="serch">
        <div class="serch_box"><input name="username" placeholder="淘入好物，就用淘京" type="text"></div>
        <div class="serch_pic"><a href="#"><img src="imgs/serch.png"/></a></div>
    </div>
    <div class="shoppingcart">
        <div class="shoppingcart_pic"><img src="imgs/shoppingcart.png"/></div>
        <div class="shoppingcart_char"><a href="#"><h1>我的购物车</h1></a></div>
    </div>
</div>

<div class="log-reg">
    <div class="container" id="container">
        <div class="form-container reg-container">
            <!-- 注册 -->
            <form>
                <h1>用户注册</h1>
                <div class="social-container">
                    <a class="social" href="#"><i class="iconfont icon-QQ-circle-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-wechat-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-weibo-circle-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-github-fill"></i></a>
                </div>
                <span>您可以选择以上方式注册一个您的账户！</span>
                <input id="name02" name="name02" placeholder="用户名" type="text" />
                <input id="upwd02" name="upwd02" placeholder="密码" type="password"/>
                <input id="repwd" name="repwd" placeholder="确认密码" type="password"/>
                <input id="email" name="email" placeholder="邮箱" type="tel"/>
                <button id="send_code" type="button">发送验证码</button>
                <input placeholder="验证码" type="text" id="code"/>
                <button id="reg-in" type="button">注册</button>

            </form>

        </div>
        <div class="form-container login-container">
            <!-- 登录 -->
            <form id="loginform">
                <h1>用户登录</h1>
                <div class="social-container">
                    <a class="social" href="#"><i class="iconfont icon-QQ-circle-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-wechat-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-weibo-circle-fill"></i></a>
                    <a class="social" href="#"><i class="iconfont icon-github-fill"></i></a>
                </div>
                <span>您可以选择以上方式登录一个您的账户！</span>
                <input name="name01" placeholder="用户名" type="text"/>
                <input name="upwd01" placeholder="密码" type="password"/>
                <a href="#">忘记密码？</a>
                <button id="login-in" type="button">登录</button>
            </form>
        </div>
        <!-- 侧边栏内容 -->
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-pannel overlay-left">
                    <h1>已有帐号？</h1>
                    <p>亲爱的快快点我去登陆吧。</p>
                    <button class="ghost" id="login">登录</button>
                </div>
                <div class="overlay-pannel overlay-right">
                    <h1>没有帐号？</h1>
                    <p>点击注册去注册一个属于你的账号吧。</p>
                    <button class="ghost" id="reg">注册</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="footer" id="footer">
    <p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media &
        IR</p>

    <p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零
        字第大120007号</p>

    <p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>

    <p>Copyright © 2004 - 2023 京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 |
        营业执照
        | 增值电信业务经营许可证</p>

    <p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
    </p>


</div>
<!--<div class="message" id="message"></div>-->
</body>
<script src="js/index.js"></script>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/ajax.js"></script>
<script src="back/layui/layui.js"></script>

<script>

    layui.use(['table', 'form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        $ = layui.jquery;


        const emailInput = document.getElementById('email');

        emailInput.addEventListener('blur', function() {
            const email = emailInput.value;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailRegex.test(email)) {
                layer.msg('请输入正确的邮箱账号！');
                emailInput.value = '';
            }
        });


        $('#name02').blur(function() {
            var username = $(this).val();
            if (username.trim() === '') {
                // $(this).attr('placeholder', '用户名不能为空');
                layer.msg('用户名不能为空');
            }
        });

        $("#login-in").click(function () {
            let uname = $("#loginform input[name='name01']").val();
            let upwd = $("#loginform input[name='upwd01']").val();
            if (uname.trim() === '' || upwd.trim() === '') {
                return;
            }
            ajax("POST", 'user', {uname: uname, upwd: upwd, op: 'login'}, function (rs) {
                if (rs.ustate == 1) {
                    localStorage.setItem('userData', JSON.stringify(rs));
                    window.location.href = "index.html";
                } else {
                    layer.msg('用户被冻结,请寻找管理员申诉');
                }
            });
        });
        //表单提交 添加计划
        $("#reg-in").click(function () {

            let uname = $("#name02").val();
            let upwd = $("#upwd02").val();
            let repwd = $("#repwd").val();
            let uemail = $("#email").val();
            let code = $("#code").val();

            if (uname.trim() === '' || upwd.trim() === '' || repwd.trim() === ''||uemail.trim() === ''|| code.trim() === ''){
                layer.msg('验证码不能为空');
                return;
            }
            if (upwd!=repwd){
                layer.msg('两次密码不一致');
                return;
            }
            $.post("user", {
                uname: uname,
                upwd: upwd,
                uemail: uemail,
                code:code,
                op: 'reg'
            }, function (rs) {
                if (rs == 1) {
                    layer.msg('注册成功');
                } else {
                    layer.msg('注册失败，请重新输入');
                }
            }, "json");
        });


        $("#send_code").click(function () {
            let uemail = $("#email").val();
            $.post("user", {
                uemail: uemail,
                op: 'sendMsg'
            }, function (rs) {
                if (rs == 1) {
                    //发送成功
                    layer.msg('发送验证码成功');
                } else {
                    //发送失败
                    layer.msg('发送验证码失败');
                }
            }, "json");
        });
    });

</script>
</html>
